<div style="min-height:calc(100vh -  157px)">
  <!--左边菜单树-->
  <div nz-row [nzGutter]="10" style="padding-top: 20px;">
    <!-- 左边 -->
    <div nz-col nzSpan="12" style="height: 835px;padding:10px 20px;border: 1px solid #ebedf0;">
      <h2>系统菜单</h2>
      <nz-tree #treeCom [nzData]="nodes" (nzContextMenu)="activeNode($event)" (nzClick)="activeNode($event)" (nzDblClick)="openFolder($event)">
        <!--鼠标右键点击节点弹出选框-->
        <ng-template #contextTemplate>
          <ul nz-menu nzInDropDown>
            <li nz-menu-item (click)="selectDropdown('folder')">新建文件夹</li>
            <li nz-menu-item (click)="selectDropdown('file')">新建子节点</li>
            <li nz-menu-item (click)="deleteNode()">删除</li>
          </ul>
        </ng-template>

        <!--点击节点时菜单图标的动作-->
        <ng-template #nzTreeTemplate let-node>
          <span class="custom-node" [class.active]="activedNode?.key===node.key">
            <span (contextmenu)="contextMenu($event,contextTemplate)">
              <i nz-icon [type]="node.isExpanded ? 'folder-open' : 'folder'" (click)="openFolder(node)"></i>
              <span class="ant-tree-title">{{node.title}}</span>
            </span>
            <!--<span *ngIf="node.isLeaf">-->
              <!--<i nz-icon type="folder"></i>-->
              <!--<span class="file-name">{{node.title}}</span>-->
            <!--</span>-->
          </span>
        </ng-template>
      </nz-tree>
    </div>

    <!-- 右边展示当前节点详情，并修改详情 -->
    <div nz-col nzSpan="12" style="height: 835px;margin-left:-20px;padding:5px 20px;border: 1px solid #ebedf0;">
      <form *ngIf="activedNode?.isSelected" nz-form [formGroup]="validateForm" (ngSubmit)="submitForm(currentMenuInfo)" style="margin-top: 20px;">
        <nz-form-item>
          <nz-form-label [nzSpan]="4">父菜单</nz-form-label>
          <nz-form-control [nzSpan]="8">
            <input type="text" disabled nz-input value="{{activedNode.parentNode != null || ''?activedNode.parentNode.origin.title:activedNode.origin.parent}}" placeholder="父菜单名">
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzFor="name" [nzRequired]="validateForm.get('required')?.value">名称</nz-form-label>
          <nz-form-control [nzSpan]="8">
            <input type="text" nz-input formControlName="name"  [(ngModel)]="currentMenuInfo.name"  placeholder="名称">
            <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">请输入菜单名称</nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="4">类型</nz-form-label>
          <nz-form-control [nzSpan]="8">
            <input type="text" nz-input value="{{activedNode.origin.typeName}}" disabled>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzFor="action" [nzRequired]="validateForm.get('required')?.value">action</nz-form-label>
          <nz-form-control [nzSpan]="8">
            <input type="text" nz-input formControlName="action" [(ngModel)]="currentMenuInfo.action" placeholder="模块名称（英文）">
            <nz-form-explain *ngIf="validateForm.get('action').dirty && validateForm.get('action').errors">请输入模块名称</nz-form-explain>
          </nz-form-control>
        </nz-form-item>


        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzFor="style" [nzRequired]="validateForm.get('required')?.value">样式</nz-form-label>
          <nz-form-control [nzSpan]="8">
            <input type="text" nz-input formControlName="style" [(ngModel)]="currentMenuInfo.style"  placeholder="图标样式">
            <nz-form-explain *ngIf="validateForm.get('style').dirty && validateForm.get('style').errors">请输入图标样式</nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="4" nzFor="sort" [nzRequired]="validateForm.get('required')?.value">排序</nz-form-label>
          <nz-form-control [nzSpan]="8">
            <input type="text" nz-input formControlName="sort" [(ngModel)]="currentMenuInfo.sort" placeholder="菜单排序">
            <nz-form-explain *ngIf="validateForm.get('sort').dirty && validateForm.get('sort').errors">请输入菜单排序</nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-control [nzSpan]="8" [nzOffset]="4">
            <button nz-button nzType="primary">保存</button>
          </nz-form-control>
        </nz-form-item>

      </form>
    </div>
  </div>
</div>
